<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      @keyup.enter.native="search()"
    >
      <el-form-item label="所属大区" v-show="userType && userType2">
        <br />
        <br />
        <el-select
          v-model="formInline.zqOrgSeq"
          clearable
          filterable
          @change="selCore(formInline.zqOrgSeq)"
          style="margin-left:-70px;width:200px"
        >
          <el-option
            v-for="item in corpList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="所属营销区域"
        v-show="userType"
        style="margin-left:10px"
      >
        <br />
        <br />
        <el-select
          v-model="formInline.baseOrgSeq"
          clearable
          filterable
          @change="selbase(formInline.baseOrgSeq)"
          style="margin-left:-70px;width:200px"
        >
          <el-option
            v-for="item in RentalPayWay"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属专卖店" v-show="userType">
        <br />
        <br />
        <!-- <el-input v-model="formInline.storeName" placeholder="请输入所属专卖店"></el-input> -->
        <el-select
          v-model="formInline.storeName"
          clearable
          filterable
          @blur="selectBlur"
          style="margin-left:-70px;width:200px"
        >
          <el-option
            v-for="item in Renarr"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="变更原因" style="margin-left:10px">
        <br />
        <br />
        <el-select
          v-model="formInline.bonuspointSource"
          placeholder="全部"
          clearable
          style="margin-left:-70px;width:200px"
        >
          <el-option label="消费" value="1"></el-option>
          <el-option label="抽奖" value="3"></el-option>
          <el-option label="会员等级" value="2"></el-option>
          <el-option label="年度清除" value="4"></el-option>
          <el-option label="买赠活动赠品" value="5"></el-option>
          <el-option label="分享活动赠品" value="6"></el-option>
          <el-option label="注册有礼" value="7"></el-option>
          <el-option label="抽奖获得" value="8"></el-option>
          <el-option label="积分兑换" value="9"></el-option>
          <el-option label="答题有礼" value="10"></el-option>
          <el-option label="元春活动" value="11"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会员等级" style="margin-left:10px">
        <br />
        <br />
        <el-select
          v-model="formInline.gradelevelId"
          placeholder="全部"
          clearable
          style="margin-left:-70px;width:200px"
        >
          <el-option
            v-for="(send, i) in options"
            :key="i"
            :value="send.uuid"
            :label="send.gradelevelName"
          ></el-option>
        </el-select>
      </el-form-item>
      <br />
      <el-form-item label="名称">
        <br />
        <br />
        <el-input
          v-model="formInline.userName"
          clearable
          style="margin-left:-40px;width:200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机">
        <br />
        <br />
        <el-input
          v-model="formInline.cellPhoneNo"
          clearable
          style="margin-left:-40px;width:200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="门店授权编码" style="margin-left:10px">
        <br />
        <br />
        <el-input
          v-model="formInline.authCode"
          clearable
          style="margin-left:-90px;width:200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="变更时间" style="margin-left:10px">
        <br />
        <br />
        <!--
        <el-date-picker
          v-model="formInline.orderDate"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
                -->
        <el-date-picker
          v-model="formInline.dateRange"
          type="daterange"
          style="margin-left:-70px;width:410px"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item style="margin-left:850px;text-align:right">
        <el-button
          type="primary"
          v-preventReClick
          @click="search()"
          size="mini"
          icon="el-icon-search"
          >查询</el-button
        >
        <el-button
          type="primary"
          @click="kong()"
          size="mini"
          icon="el-icon-delete"
          >清空</el-button
        >
        <el-button
          v-preventReClick
          @click="exportExcel"
          style="margin-top: 0px;"
          size="mini"
          type="success"
          icon="el-icon-s-data"
          :loading="exportLoading"
          >导出</el-button
        >
        <el-button
          type="primary"
          @click="showConfigTableDialog()"
          size="mini"
          icon="el-icon-setting"
          :loading="insertLoading"
          >列表配置</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      id="rebateSetTable"
      @selection-change="selectionChangeHandle"
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      height="400px"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      border
      v-loading="loading"
      @sort-change="handleSort"
    >
      <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
      <!-- <el-table-column type="index" label="序号" align="center" width fixed></el-table-column> -->
      <el-table-column
        v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="dropCol[index].prop"
        :width="dropCol[index].width"
        :min-width="200"
        :label="item.label"
        align="center"
        :sortable="item.sortable"
      >
        <template slot-scope="scope">
          <div v-if="dropCol[index].prop === 'bonuspointSource'">
            <div v-if="scope.row.bonuspointSource != null">
              <div v-if="scope.row.bonuspointSource === 1">消费</div>
              <div v-if="scope.row.bonuspointSource === 2">会员等级</div>
              <div v-if="scope.row.bonuspointSource === 3">抽奖</div>
              <div v-if="scope.row.bonuspointSource === 4">年度清除</div>
              <div v-if="scope.row.bonuspointSource === 5">买赠活动赠品</div>
              <div v-if="scope.row.bonuspointSource === 6">分享活动赠品</div>
              <div v-if="scope.row.bonuspointSource === 7">注册有礼</div>
              <div v-if="scope.row.bonuspointSource === 8">抽奖获得</div>
              <div v-if="scope.row.bonuspointSource === 9">积分兑换</div>
              <div v-if="scope.row.bonuspointSource === 10">答题有礼</div>
              <div v-if="scope.row.bonuspointSource === 11">元春活动</div>
            </div>
            <div v-if="scope.row.bonuspointSource == null">-</div>
          </div>
          <span v-if="dropCol[index].prop !== 'bonuspointSource'">{{
            scope.row[dropCol[index].prop]
          }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="memberSeq" label="会员编号" width="150" align="left"></el-table-column>
            <el-table-column prop="userName" label="会员名称" width="130" align="left"></el-table-column>
            <el-table-column prop="gradeLevel" label="会员等级" width="100" align="left"></el-table-column>
            <el-table-column prop="cellPhoneNo" label="手机号码" width="120" align="left"></el-table-column>
            <el-table-column prop="bonuspoint" label="积分变更" width="70" align="left">
                <template slot-scope="scope">
                    <span v-if="scope.row.bonuspoint == 0">
                        {{
                        scope.row.bonuspoint
                        }}
                    </span>
                    <span v-if="scope.row.getUse == 1 && scope.row.bonuspoint != 0">
                        {{
                        "+" + scope.row.bonuspoint
                        }}
                    </span>
                    <span v-if="scope.row.getUse == 2 && scope.row.bonuspoint != 0">
                        {{
                        scope.row.bonuspoint
                        }}
                    </span>
                </template>
            </el-table-column>

            <el-table-column prop="bonuspointSource" label="变更原因" width align="left">
                <template slot-scope="scope">
                    <span v-if="scope.row.bonuspointSource == null">-</span>
                    <span v-if="scope.row.bonuspointSource == 1">消费</span>
                    <span v-if="scope.row.bonuspointSource == 2">会员等级</span>
                    <span v-if="scope.row.bonuspointSource == 3">抽奖</span>
                    <span v-if="scope.row.bonuspointSource == 4">年度清除</span>
                    <span v-if="scope.row.bonuspointSource == 5">买赠活动赠品</span>
                    <span v-if="scope.row.bonuspointSource == 6">分享活动赠品</span>
                    <span v-if="scope.row.bonuspointSource == 7">注册有礼</span>
                        <span v-if="scope.row.bonuspointSource == 10">答题有礼</span>
                </template>
            </el-table-column>
            <el-table-column prop="bonuspointTime" label="变更时间" width="200" align="left"></el-table-column>
            <el-table-column prop="currentBonuspoint" label="剩余积分" width align="right"></el-table-column>
            <el-table-column
                prop="authCode"
                label="店铺授权码"
                width="180"
                align="left"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                prop="storeName"
                label="店铺名称"
                width="180"
                align="left"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                prop="zqName"
                label="大区名称"
                width="180"
                align="left"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                prop="baseName"
                label="营销区域名称"
                width="180"
                align="left"
                show-overflow-tooltip
            ></el-table-column>-->
      <!-- <el-table-column align="center" prop="picUrl" label="图片" width>
                <template slot-scope="scope"><img :src="scope.row.picUrl"
                        v-if="scope.row.picUrl != '' && scope.row.picUrl != null" width="70" height="50"/>
                </template>
            </el-table-column>-->
      <!-- <el-table-column label="操作" width="280" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="editInfo(scope.row)">修改</el-button>
                    <el-button type="text" size="mini" @click="handledelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>-->
    </el-table>
    <el-form :inline="true" :model="formInline">
      <el-form-item style="margin-top: 6px;"></el-form-item>
    </el-form>
    <div class="block" style="margin-top:-49px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!--列表配置-->
    <el-dialog
      title="列表配置"
      :visible.sync="configTableDialogVisible"
      width="50%"
      @close="closeConfigTableDialog()"
    >
      <div id="configTableDiv">
        <el-form :inline="true" :model="formInline2" class="demo-form-inline">
          <el-form-item label="选择列表字段：">
            <el-checkbox
              :indeterminate="formInline2.isIndeterminate"
              v-model="formInline2.isAll"
              style="margin-top:10px;"
              @change="isAllFieldChange"
              >全选</el-checkbox
            >
          </el-form-item>
          <el-divider></el-divider>
          <el-checkbox-group
            v-model="userMenuShowFields"
            @change="isSingleFieldChange"
          >
            <el-checkbox
              v-for="item in userMenuFieldList"
              :label="item.fieldCode"
              :key="item.fieldCode"
              style="margin:15px 10px;width:120px;"
              >{{ item.fieldName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form>
        <el-row>
          <el-col :span="24" style="text-align: center;margin-top: 30px">
            <el-button type="info" @click="closeConfigTableDialog()" size="mini"
              >取 消</el-button
            >
            <el-button
              type="primary"
              @click="insertUserFieldRelation()"
              size="mini"
              >确 认</el-button
            >
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import xlsxjs from "../../assets/xlsx.full.min.js";
import Sortable from 'sortablejs';
import {
  queryUserMenuFieldByParam,
  insertUserFieldRelation,
} from '@/api/tradeOrderSearch';
import { getAllZone, getAllBase, getAllShop } from '@/api/addShopapply.js';
import { getmemberrule } from '@/api/membergrade';
import { queryMemberPoints, exportServiceRecord } from '@/api/integralFlowList';
import imageUpload from '@/page/common/Image-upload';
import qs from 'qs';
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
export default {
  data() {
    return {
      corpList: [], //商户列表
      RentalPayWay: [], //商户列表
      Renarr: [],
      options: [],
      allCol: [],
      col: [],
      dropCol: [],
      insertLoading: false,
      configTableDialogVisible: false, //列表配置弹窗状态
      formInline2: {
        isIndeterminate: false, //是否半选中
        isAll: true, //是否全部显示,
        menuCode: 'integralFlow',
      },
      userMenuFieldList: [], //全部列名列表
      userMenuAllFields: [], //全部的列名
      userMenuShowFields: [], //显示的列名
      userOldMenuShowFields: [], //原显示的列名
      tableData: [],
      shopLevelList: [],
      dataListSelections: [],
      lsGoodsList: [],
      loading: true,
      total: 0,
      listQuery: {
        current: 1,
        size: 100,
      },
      total2: 0,
      listQuery2: {
        current: 1,
        size: 100,
      },
      userType: false,
      userType2: false,
      exportLoading: false,
      dialogVisible: false,
      dialogVisibleLevel: false,
      formInline: {
        sort: 1,
        userType: '',
        authCode: '',
        zqOrgSeq: '',
        baseOrgSeq: '',
        storeName: '',
        userName: '',
        cellPhoneNo: '',
        status: '',
        bonuspointSource: '',
        gradelevelId: '',
        dateRange: [],
      },
      rules: {},
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
    };
  },
  mounted() {
    var nowDay = this.getNowDay();
    var beginDay = this.getMonthOneDay();
    this.formInline.dateRange = [beginDay, nowDay];

    this.logininfo = localStorage.getItem('logininfo');
    this.orgList = JSON.parse(this.logininfo).orgList;
    if (this.orgList[0].orgType == 4) {
      this.formInline.orgSeq = this.orgList[0].orgSeq;
    }

    this.orgSeq = this.orgList[0].orgSeq;
    this.formInline.userType = JSON.parse(this.logininfo).userType;
    this.userType =
      this.formInline.userType !== '4' && this.formInline.userType !== '5';
    this.userType2 = this.formInline.userType == '2' ? false : true;
    if (this.userType2 == false) {
      this.selCore(this.orgSeq);
      this.formInline.zqOrgSeq = this.orgSeq;
    }

    this._getAllZone();

    this.getDataList();
    this._getmemberinfo();

    this.queryUserMenuFieldByParam(); //加载列表配置字段
    document.body.ondrop = function(event) {
      event.preventDefault();
      event.stopPropagation();
    };
    // this.rowDrop()
    this.columnDrop();
  },
  components: {
    imageUpload,
  },
  created() {},
  methods: {
    //拖拽列表
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {
          const oldItem = this.dropCol[evt.oldIndex];
          this.dropCol.splice(evt.oldIndex, 1);
          this.dropCol.splice(evt.newIndex, 0, oldItem);
        },
      });
    },
    getNowDay() {
      var date = new Date();
      var seperator1 = '-';
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = '0' + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    getMonthOneDay() {
      var date = new Date();
      var seperator1 = '-';
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = '01';
      if (month >= 1 && month <= 9) {
        month = '0' + month;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    kong() {
      if (this.userType2) {
        this.formInline.zqOrgSeq = '';
      }
      this.formInline.baseOrgSeq = '';
      this.formInline.authCode = '';
      this.formInline.storeName = '';
      this.formInline.userName = '';
      this.formInline.cellPhoneNo = '';
      this.formInline.status = '';
      this.formInline.bonuspointSource = '';
      this.formInline.gradelevelId = '';
      this.formInline.dateRange = [];
      this.formInline.sort = 1;
    },
    search() {
      if (
        this.formInline.dateRange == undefined ||
        this.formInline.dateRange == null ||
        this.formInline.dateRange.length <= 0
      ) {
        this.$message.error('请选择变更时间');
        return;
      }
      this.loading = true;
      this.listQuery.current = 1;
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          sort: this.formInline.sort,
          zqOrgSeq: this.formInline.zqOrgSeq,
          baseOrgSeq: this.formInline.baseOrgSeq,
          authCode: this.formInline.authCode,
          storeName: this.formInline.storeName,
          userName: this.formInline.userName,
          cellPhoneNo: this.formInline.cellPhoneNo,
          gradelevelId: this.formInline.gradelevelId,
          status: this.formInline.status,
          bonuspointSource: this.formInline.bonuspointSource,
          beginTime:
            this.formInline.dateRange !== undefined &&
            this.formInline.dateRange.length > 0
              ? this.formInline.dateRange[0]
              : '',
          endTime:
            this.formInline.dateRange !== undefined &&
            this.formInline.dateRange.length > 1
              ? this.formInline.dateRange[1]
              : '',
        },
      };
      queryMemberPoints(data).then((res) => {
        this.loading = false;
        this.total = res.total;
        this.tableData = res.records;
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getDataList();
    },

    _getAllZone() {
      let data = {};
      getAllZone(data).then((res) => {
        this.corpList = res.result;
      });
    },
    selCore(value) {
      if (value != '' && value != undefined && value != null) {
        this.orgSeq = value;
        let data = { code: value };
        getAllBase(data).then((res) => {
          this.RentalPayWay = res.result;
          this.formInline.baseOrgSeq = '';
        });
      } else if (this.formInline.baseOrgSeq != '') {
        this.orgSeq = this.formInline.baseOrgSeq;
      } else {
        this.orgSeq = JSON.parse(this.logininfo).orgSeq;
      }
    },
    selbase(value) {
      if (value != '' && value != undefined && value != null) {
        this.orgSeq = value;
        let data = { code: value };
        getAllShop(data).then((res) => {
          this.Renarr = res.result;
        });
      } else if (this.formInline.zqOrgSeq != '') {
        this.orgSeq = this.formInline.zqOrgSeq;
      } else {
        this.orgSeq = JSON.parse(this.logininfo).orgSeq;
      }
    },
    selectBlur(e) {
      this.formInline.storeName = e.target.value;
    },
    getDataList() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          sort: this.formInline.sort,
          zqOrgSeq: this.formInline.zqOrgSeq,
          baseOrgSeq: this.formInline.baseOrgSeq,
          authCode: this.formInline.authCode,
          storeName: this.formInline.storeName,
          userName: this.formInline.userName,
          cellPhoneNo: this.formInline.cellPhoneNo,
          gradelevelId: this.formInline.gradelevelId,
          status: this.formInline.status,
          bonuspointSource: this.formInline.bonuspointSource,
          beginTime:
            this.formInline.dateRange !== undefined &&
            this.formInline.dateRange.length > 0
              ? this.formInline.dateRange[0]
              : '',
          endTime:
            this.formInline.dateRange !== undefined &&
            this.formInline.dateRange.length > 1
              ? this.formInline.dateRange[1]
              : '',
        },
      };
      queryMemberPoints(data).then((res) => {
        this.loading = false;
        this.total = res.total;
        this.tableData = res.records;
      });
    },

    // 多选表1
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },

    _getmemberinfo() {
      let data = {
        size: 99,
        current: 1,
        condition: {},
        ascs: [],
        descs: [],
      };
      getmemberrule(data).then((res) => {
        this.options = res.records;
      });
    },

    selectSends() {
      this.dialogVisibleLevel = !this.dialogVisibleLevel;
      this.getShopLevelList();
    },

    getShopLevelList() {
      this.loading = true;
      let data = {
        size: this.listQuery2.size,
        current: this.listQuery2.current,
        condition: {
          isDeliver: 0,
          sort: 1,
        },
        ascs: [],
        descs: [],
      };
      queryMemberPoints(data).then((res) => {
        this.shopLevelList = res.records;
        this.total2 = res.total;
      });
      this.loading = false;
    },

    goodsChecked(row) {
      this.lsGoodsList = row;
    },

    handleSizeChange2(val) {
      this.listQuery2.size = val;
      this.getShopLevelList();
    },
    handleCurrentChange2(val) {
      this.listQuery2.current = val;
      this.getShopLevelList();
    },

    //流导出
    exportExcel() {
      let data = {
        size: this.total,
        current: 1,
        condition: {
          zqOrgSeq: this.formInline.zqOrgSeq,
          baseOrgSeq: this.formInline.baseOrgSeq,
          authCode: this.formInline.authCode,
          storeName: this.formInline.storeName,
          userName: this.formInline.userName,
          cellPhoneNo: this.formInline.cellPhoneNo,
          gradelevelId: this.formInline.gradelevelId,
          status: this.formInline.status,
          bonuspointSource: this.formInline.bonuspointSource,
          beginTime:
            this.formInline.dateRange !== undefined &&
            this.formInline.dateRange.length > 0
              ? this.formInline.dateRange[0]
              : '',
          endTime:
            this.formInline.dateRange !== undefined &&
            this.formInline.dateRange.length > 1
              ? this.formInline.dateRange[1]
              : '',
        },
      };
      this.exportLoading = true;
      exportServiceRecord(data).then((res) => {
        this.exportLoading = false;
        let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
        const link = document.createElement('a');
        link.style = 'display:none';
        link.href = URL.createObjectURL(blob);
        link.download = new Date().toLocaleDateString() + '积分流水表.xlsx';
        document.body.appendChild(link);
        link.click();
      });
    },
    //显示配置弹窗
    showConfigTableDialog() {
      this.userMenuShowFields = this.userOldMenuShowFields;
      let checkedCount = this.userMenuShowFields.length;
      this.formInline2.isAll = checkedCount === this.userMenuAllFields.length;
      this.formInline2.isIndeterminate =
        checkedCount > 0 && checkedCount < this.userMenuAllFields.length;
      this.configTableDialogVisible = true;
    },
    //关闭配置弹窗
    closeConfigTableDialog() {
      this.configTableDialogVisible = false;
      let data = {
        menuCode: this.formInline2.menuCode,
      };
    },
    queryUserMenuFieldByParam() {
      let data = {
        menuCode: this.formInline2.menuCode,
      };
      this.userMenuAllFields = []; //全部的列名
      this.userMenuShowFields = []; //显示的列名
      queryUserMenuFieldByParam(data).then((res) => {
        this.userMenuFieldList = res.records;
        this.userMenuFieldList.forEach((item, index) => {
          this.userMenuAllFields.push(item.fieldCode);
          if (item.isShow == 1) {
            this.userMenuShowFields.push(item.fieldCode);
          }
        });
        if (
          this.userMenuShowFields.length == 0 ||
          this.userMenuShowFields.length == this.userMenuAllFields.length
        ) {
          this.userMenuShowFields = this.userMenuAllFields;
          this.formInline2.isAll = true;
        } else {
          this.formInline2.isAll = false;
          this.formInline2.isIndeterminate = true;
        }
        this.insertUserFieldRelation(1);
      });
      // .then(() => {
      //  })
    },
    getNewCol() {
      let data = {
        menuCode: this.formInline2.menuCode,
      };
      this.col = [];
      this.dropCol = [];
      queryUserMenuFieldByParam(data).then((res) => {
        this.userMenuFieldList = res.records;
        this.userMenuFieldList.forEach((item, index) => {
          if (item.isShow == 1) {
            this.col.push({ label: item.fieldName, prop: item.fieldCode });
            this.dropCol.push({ label: item.fieldName, prop: item.fieldCode });
          }
        });
        if (this.col.length == 0) {
          this.col = this.allCol;
          this.dropCol = this.allCol;
          this.formInline2.isAll = true;
        }
        this.col.forEach((item, index) => {
          if (item.prop == 'bonuspointTime') {
            this.$set(item, 'sortable', 'bonuspointTime');
          }
          if (item.prop == 'currentBonuspoint') {
            this.$set(item, 'sortable', 'currentBonuspoint');
          }
        });
      });
    },
    //保存显示字段
    insertUserFieldRelation(isInit) {
      if (
        this.userMenuShowFields == null ||
        this.userMenuShowFields.length == 0
      ) {
        this.$message({
          showClose: true,
          message: '列表字段不可为空',
          type: 'info',
        });
        return;
      }
      let data = {
        menuCode: this.formInline2.menuCode,
        fieldList: this.userMenuShowFields,
      };
      if (isInit == 1) {
        insertUserFieldRelation(data).then((res) => {
          if (res.code == 1) {
            this.userOldMenuShowFields = this.userMenuShowFields;
            this.closeConfigTableDialog();
            this.getNewCol();
          }
        });
        return;
      }
      this.insertLoading = true;
      insertUserFieldRelation(data).then((res) => {
        this.insertLoading = false;
        if (res.code == 1) {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'success',
          });
          this.userOldMenuShowFields = this.userMenuShowFields;
          this.closeConfigTableDialog();
          this.getNewCol();
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'error',
          });
        }
      });
    },
    //是否全选字段
    isAllFieldChange(val) {
      this.userMenuShowFields = val ? this.userMenuAllFields : [];
      if (val) {
        this.col = this.allCol;
        this.dropCol = this.allCol;
      } else {
        this.col = [];
        this.dropCol = [];
      }
      this.formInline2.isIndeterminate = false;
    },
    //是否选中单个字段
    isSingleFieldChange(val) {
      let checkedCount = this.userMenuShowFields.length;
      this.formInline2.isAll = checkedCount === this.userMenuAllFields.length;
      this.formInline2.isIndeterminate =
        checkedCount > 0 && checkedCount < this.userMenuAllFields.length;
    },
    //获取字段勾选状态
    getUserMenuFieldStatus(fieldCode) {
      if (this.userMenuShowFields != null) {
        for (let i = 0; i < this.userMenuShowFields.length; i++) {
          if (this.userMenuShowFields[i] == fieldCode) {
            return true;
          }
        }
        return false;
      }
    },
    //是否显示字段
    isShow(fieldCode) {
      if (this.formInline2.isAll || this.getUserMenuFieldStatus(fieldCode)) {
        return true;
      } else {
        return false;
      }
    },

    // handleSort(val) {
    //   let sortModel = "";
    //   if (val.order === "ascending") {
    //     sortModel = "ASC";
    //   } else if (val.order === "descending") {
    //     sortModel = "DESC";
    //   }
    //   console.log(val, sortModel);
    // },
    handleSort(val) {
      let sortModel = '';
      if (val.order === 'ascending') {
        sortModel = 'ASC';
        if (val.prop == 'bonuspointTime') {
          this.formInline.sort = 1;
          this.search();
        }
        if (val.prop == 'currentBonuspoint') {
          this.formInline.sort = 3;
          this.search();
        }
      } else if (val.order === 'descending') {
        sortModel = 'DESC';
        if (val.prop == 'bonuspointTime') {
          this.formInline.sort = 2;
          this.search();
        }
        if (val.prop == 'currentBonuspoint') {
          this.formInline.sort = 4;
          this.search();
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.el-form-item .el-select {
  width: 100%;
}
</style>
